<template>
	<view class="u-page">
		<view class="bg">

			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-top: 85rpx">
						<u-col span="2">
							<view class="demo-layout col_center">
								<image style="width: 15rpx; height: 27rpx;" src="../../static/tu/left_arrow.png"
									@tap="goBack()"></image>
							</view>
						</u-col>
						<u-col span="8">
							<view class="demo-layout col_center">
								<span style="color: white; font-size: 32rpx;">登录注册</span>
							</view>
						</u-col>
						<u-col span="2">
							<view class="demo-layout col_center">
								<image style="width: 34rpx; height: 36rpx;" src="../../static/tu/function22.png">
								</image>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<!-- 			<div class="top">
				<image style="width: 15rpx; height: 27rpx;margin-left: 31rpx;margin-top: 70rpx;"
					src="../../static/tu/left_arrow.png" @tap="goBack()"></image>
				<span style="color: white; margin-right: 260rpx;margin-left: 250rpx;margin-top: 70rpx;">登录注册</span>
				<image style="width: 34rpx; height: 36rpx;margin-top: 70rpx;" src="../../static/tu/function22.png">
				</image>
			</div> -->
			<div class="word">
				<p style="margin-left: 33rpx;">顺风车行</p>
				<p style="margin-left: 85rpx;">一路向前</p>
			</div>
			<u--form class="info" :model="model1" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item prop="mobile" class="item_input">
					<u--input placeholder="+86 | 输入手机号码" maxlength="11" :focus="false" type="number" shape="circle"
						class="input_tel" v-model="model1.mobile"></u--input>
				</u-form-item>
				<view style="display: inline-flex;">
					<u-form-item prop="code" class="item_input">
						<u--input placeholder="输入验证码" type="number" shape="circle" class="input_code"
							style="margin-top: 35rpx;" v-model="model1.code"></u--input>
					</u-form-item>
					<view class="wrap" style="margin-top: 45rpx ;margin-left: -180rpx;">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<u-button @tap="getCode()" shape="circle" class="btn_code">{{tips}}</u-button>
					</view>
				</view>
				<div align="center">
					<u-button shape="circle" class="btn_login" @click="isLogin">立即登录</u-button>
					<!-- <image src="../../static/tu/login_btn2.png" style="width: 638rpx;height: 96rpx;margin-top: 100rpx;"></image> -->
				</div>
				<p style="text-align: center;color: #767676;font-size: 24rpx;margin-top: 23rpx;">首次登录用户验证后自动登录</p>
			</u--form>
			<p style="text-align: center;color: #595959;font-size: 28rpx;margin-top: 110rpx;">其他方式登录</p>
			<div class="img_div">
				<image src="../../static/tu/login_wx.png" class="imgs"></image>
				<image src="../../static/tu/login_qq.png" class="imgs"
					style="margin-left: 150rpx;margin-right: 150rpx;"></image>
				<image src="../../static/tu/login_wb.png" class="imgs"></image>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 10,
				errorType: 'message',
				codeNumber: '',
				number:'',
				model1: {
					mobile: '',
					code: '',
				},
				rules: {
					'mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'code': {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['change', 'blur']
					}
				},
			}
		},
		onReady() {

		},
		methods: {
			goBack() {
				uni.switchTab({
					//关闭当前页面，返回上一页面或多级页面。
					url: '/pages/my/my',
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$refs.uForm.validateField('mobile', e => {
						if (e.length == 0) {
							if (this.model1.mobile === '') {
								uni.$u.toast('请先填写正确手机号码');
							} else {
								// 模拟向后端请求验证码
								uni.showLoading({
									title: '正在获取验证码'
								})
								setTimeout(() => {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									this.number='';
									for(var i=0;i<4;i++){
										this.number+=Math.floor(Math.random() * 10 );
									}
									this.codeNumber=this.number;
									alert(this.codeNumber);
									uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 2000);
							}
						} else {
							uni.$u.toast('请先填写正确手机号码');
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			isLogin() {
				this.$refs.uForm.validate().then(res => {
					if (this.model1.code == this.codeNumber) {
						uni.$u.toast('校验通过');
						sessionStorage.userName=this.model1.mobile;
						uni.switchTab({
							url: '/pages/shouye/shouye',
						})
						location.reload();
					} else {
						uni.$u.toast('验证码错误！');
					}
				}).catch(errors => {
					uni.$u.toast('登录失败！');
				})
			}
		}
	}
</script>

<style>
	.bg {
		background-image: url("../../static/tu/loginTop.png");
		width: 100%;
		height: 786rpx;
		/* overflow: hidden; */
		/* padding-top: 70rpx; */
		border-top: 1px solid #4481EB;
	}

	.col_center {
		margin: auto;
	}

	.word {
		margin-top: 50rpx;
		color: white;
		line-height: 72rpx;
		font-size: 48rpx;
	}

	.info {
		width: 690rpx;
		height: 570rpx;
		background-color: white;
		margin: auto;
		margin-top: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx gainsboro;
		padding-top: 60rpx;
	}

	.item_input {
		width: 610rpx;
		margin-left: 15rpx;
	}

	.input_tel {
		width: 610rpx;
		height: 68rpx;
		background: #EBEAEA;
		margin: auto;
	}

	.input_code {
		width: 610rpx;
		height: 68rpx;
		background: #EBEAEA;
		margin: auto;
		position: relative;
	}

	.btn_code {
		width: 210rpx;
		height: 95rpx;
		background-image: url("../../static/tu/Login_btn_code.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: white;
		border: none;
		position: absolute;
		/* margin-top: -126rpx;
		margin-left: 438rpx; */
	}

	.btn_login {
		background-image: url("../../static/tu/loginBtn.png");
		color: white;
		font-size: 36rpx;
		width: 638rpx;
		height: 96rpx;
		background-repeat: no-repeat;
		margin-top: 60rpx;
	}

	.img_div {
		text-align: center;
	}

	.imgs {
		width: 72rpx;
		height: 72rpx;
		margin-top: 30rpx;
	}
</style>